<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!doctype html>
<html lang="zh">
<head>

<!-- <base target="_blank">   全局超链接新开窗口-->

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎你：<s:property value="#session.us.usersName" /></title>
<script type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/default2.css">
<link rel='stylesheet prefetch' href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles3.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="css/jquery-2.1.0.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="css/bootstrap.min.js"></script>
<style>
.inputmp {
	padding-left: 210px;
	float: none;
}

th {
	text-align: center;
}

a {
	color: #fff;
}

a:HOVER {
	color: #fff;
}

.modal-backdrop {
	z-index: 0;
}
</style>
<!--  上面修改遮罩为0权限 不然会挡住 -->
<script type="text/javascript">
	//验证添加字段是否空值
	function validateForm(){
	var x=document.forms["myForm"]["books_url"].value;
	var y=document.forms["myForm"]["books_name"].value;
	  if (y==null || y==""){
	  alert("名称不能为空！");
	  return false;
	  }
	if (x==null || x==""){
	  alert("网址不能为空！");
	  return false;
	  }	
	}
	
	//验证查询字段是否空值
	function validateForm2(){
	var z=document.forms["myForm2"]["finValue"].value;
   	if (z==null || z==""){
	  alert("内容不能为空！");
	  return false;
	  }
	  
	}
</script>
</head>
<body>

	<section class="strips">
		<article class="strips__strip">
			<div class="strip__content">
				<h1 class="strip__title" data-name="Lorem">添加</h1>

				<div class="strip__inner-text">
					<h2>添加书签</h2>

					<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
						不支持IE8及以下浏览器。</p>

					<s:form action="/books_add" method="post"
						onsubmit="return validateForm()" name="myForm">
						<div class="form-group inputmp">
							<div class="row" style="margin-bottom: 30px;">
								<div class="form-group has-success">
									<label class="col-sm-2 control-label" for="inputSuccess">名称</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="inputSuccess"
											name="books_name" maxlength="20">
									</div>
									<div class="col-sm-4">20位</div>
								</div>
							</div>
							<div class="row">
								<div class="form-group has-warning">
									<label class="col-sm-2 control-label" for="inputError">网址</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="inputError"
											name="books_url" maxlength="100">
									</div>
									<div class="col-sm-4">-100位</div>
								</div>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">添加</button>
						<s:a href="books_forWard">
							<button type="button" class="btn btn-primary">返回</button>
						</s:a>
					</s:form>
				</div>
				<h3>
					Tip:
					<s:property value="#request.addTip" />
				</h3>
			</div>

		</article>

		<!-- 修改部分 -->
		<article class="strips__strip" style="padding-right: 50px">
			<div class="strip__content">
				<h1 class="strip__title" data-name="Ipsum">修改</h1>
				<div class="strip__inner-text">
					<h2>修改书签</h2>
					<p>请输入你要修改的书签名称以及要修改的书签地址</p>
					<div class="form-group ">

						<!-- 表格显示所有书签 -->
						<table class="table table-striped">
							<thead>
								<tr>
									<th>ID</th>
									<th>名字</th>
									<th>网址</th>
									<th>修改</th>
								</tr>
							</thead>
							<tbody>
								<s:if test="#session.booksList.size()!=0">

									<!-- 数据迭代 -->
									<s:iterator value="#session.booksList" var="books" status="st">
										<tr align="center" style="color: #4B4B4B;">
											<td><s:property value="#st.count" /></td>
											<td><s:property value="#books.books_name" /></td>
											<td><s:property value="#books.books_url" /></td>
											<td>
												<!-- 按钮触发模态框 -->
												<button class="btn btn-info" data-toggle="modal"
													data-target="#myModal${st.count}">修改</button> 
												<!-- 模态框（Modal） -->
												<div class="modal fade" id="myModal${st.count}"
													tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
													aria-hidden="true">
													<div class="modal-dialog" style="z-index: 9999">
														<div class="modal-content">
															<div class="modal-header">
																<button type="button" class="close" data-dismiss="modal"
																	aria-hidden="true">&times;</button>
																<h4 class="modal-title" id="myModalLabel">修改书签</h4>
															</div>

															<!-- 表单开始 -->
															<s:form cssClass="form-horizontal" action="/books_update"
																method="post">

																<div class="form-group">
																	<label for="firstname" class="col-sm-2 control-label">名称</label>
																	<div class="col-sm-5">
																		<!-- 隐藏域  用户保存id -->
																		<s:hidden name="id"></s:hidden>
																		<input type="text" class="form-control" id="firstname"
																			name="books_name"
																			value="<s:property value="#books.books_name"/>">
																	</div>
																</div>
																<div class="form-group">
																	<label for="lastname" class="col-sm-2 control-label">网址</label>
																	<div class="col-sm-5">
																		<input type="text" class="form-control" id="lastname"
																			name="books_url"
																			value="<s:property value="#books.books_url"/>">
																	</div>
																</div>
																<div class="form-group">
																	<div class="col-sm-offset-2 col-sm-10">
																		<button type="submit" class="btn btn-default">修改</button>
																	</div>
																</div>
															</s:form>
															<div class="modal-footer">
																<button type="button" class="btn btn-primary"
																	data-dismiss="modal">关闭</button>
															</div>
														</div>

													</div>
												</div></td>
										</tr>
									</s:iterator>
								</s:if>
								<s:else>
									<tr align="center" style="color: #4B4B4B;">
										<td colspan="4">没有书签信息，请先添加！</td>
									</tr>
								</s:else>
							</tbody>
						</table>
						<s:a href="books_forWard">
							<button type="button" class="btn btn-info">返回</button>
						</s:a>
					</div>
				</div>
				<h3>
					Tip：
					<s:property value="#request.updateTip" />
				</h3>
			</div>
		</article>


		<!-- 删除部分 -->
		<article class="strips__strip">
			<div class="strip__content">
				<h1 class="strip__title" data-name="Dolor">删除</h1>
				<div class="strip__inner-text">
					<h2>删除书签</h2>
					<p>数据无价 删除请谨慎</p>
					<table class="table table-bordered">
						<thead>
							<tr style="text-align: center;">
								<th>ID</th>
								<th>名称</th>
								<th>网址</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<s:if test="#session.booksList.size()!=0">

								<!-- 数据迭代 -->
								<s:iterator value="#session.booksList" var="books" status="st">
									<tr align="center" style="color: #DDDDDD;">
										<td><s:property value="#st.count" /></td>
										<td><s:property value="#books.books_name" /></td>
										<td><s:a href="%{#books.books_url}">
												<s:property value="#books.books_url" />
											</s:a></td>
										<td>
											<button type="button" class="btn btn-danger">
												<s:a href="books_delete?id=%{#books.id}">删除</s:a>
										</td>
										</button>
									</tr>
								</s:iterator>
							</s:if>
							<s:else>
								<tr align="center" style="color: #DDDDDD;">
									<td colspan="4">没有书签信息，请先添加！</td>
								</tr>
							</s:else>
						</tbody>
					</table>
					<p>
						<s:a href="books_forWard">
							<button type="button" class="btn btn-danger">返回</button>
						</s:a>
					</p>
				</div>
				<h3>
					Tip：
					<s:property value="#request.deleteTip" />
				</h3>
			</div>
		</article>

		<!-- 查询部分 -->
		<article class="strips__strip">
			<div class="strip__content">
				<h1 class="strip__title" data-name="Sit">查询</h1>
				<div class="strip__inner-text">
					<h2>书签查找</h2>

					<!-- 表单开始 -->
					<s:form action="/books_find" method="post" name="myForm2"
						onsubmit="return validateForm2()">

						<div class="form-group has-error inputmp">
							<div class="row">
								<label class="col-sm-2 control-label" for="inputError">输入要查询的内容</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="inputError"
										name="finValue"> <label class="checkbox-inline">
										<input type="radio" name="find" value="name" checked>
										名称 </label> <label class="checkbox-inline"> <input
										type="radio" name="find" value="url"> 地址 </label>
								</div>
								<div class="col-sm-4">
									<button type="submit" class="btn btn-warning">查询</button>
								</div>
							</div>
						</div>

					</s:form>
					<!-- 表单结束 -->
					<br />
					<table class="table table-bordered">
						<thead>
							<tr style="text-align: center;">
								<th>ID</th>
								<th>名称</th>
								<th>网址</th>
							</tr>
						</thead>
						<tbody>
							<s:if test="#session.booksList.size()!=0">
								<!-- 迭代数据 -->
								<s:iterator var="fin" value="#session.findResult" status="st">
									<tr align="center">
										<td><s:property value="#st.count" /></td>
										<td><s:property value="#fin.books_name" />
										</td>
										<td><s:a href="%{#books.books_url}" target="_blank">
												<s:property value="#fin.books_url" />
											</s:a></td>
									</tr>
								</s:iterator>
							</s:if>
							<s:else>
								<td colspan="4">找不到要查询的数据</td>
							</s:else>
						</tbody>
					</table>
					<s:a href="books_forWard">
						<button type="button" class="btn btn-warning">返回</button>
					</s:a>
				</div>
				<h3>
					Tip：
					<s:property value="#request.findTip" />
				</h3>
			</div>
		</article>

		<article class="strips__strip">
			<div class="strip__content">
				<h1 class="strip__title" data-name="Amet">全部</h1>
				<div class="strip__inner-text">
					<h2>全部书签</h2>
					<p>请用户遵守法律条款，请勿违法违规！</p>
					<table class="table table-bordered">
						<thead>
							<tr style="text-align: center;">
								<th>ID</th>
								<th>名称</th>
								<th>网址</th>
							</tr>
						</thead>
						<tbody>
							<s:if test="#session.booksList.size()!=0">

								<!-- 数据迭代 -->
								<s:iterator value="#session.booksList" var="books" status="st">
									<tr align="center" style="color: #DDDDDD;">
										<td><s:property value="#st.count" />
										</td>
										<td><s:property value="#books.books_name" />
										</td>
										<td><s:a href="%{#books.books_url}" target="_blank">
												<s:property value="#books.books_url" />
											</s:a>
										</td>
									</tr>
								</s:iterator>
							</s:if>
							<s:else>
								<tr align="center" style="color: #DDDDDD;">
									<td colspan="4">没有书签信息，请先添加！</td>
								</tr>
							</s:else>
						</tbody>
					</table>
					<s:a href="books_forWard">
						<button type="button" class="btn btn-danger">返回</button>
					</s:a>
				</div>

			</div>
		</article>
	</section>

	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script>
		var Expand = function() {
			var tile = $('.strips__strip');
			var tileLink = $('.strips__strip > .strip__content');
			var tileText = tileLink.find('.strip__inner-text');
			var stripClose = $('.strip__close');
			var expanded = false;
			var open = function() {
				var tile = $(this).parent();
				if (!expanded) {
					tile.addClass('strips__strip--expanded');
					tileText.css('transition',
							'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
					stripClose.addClass('strip__close--show');
					stripClose.css('transition',
							'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
					expanded = true;
				}
			};
			var close = function() {
				if (expanded) {
					tile.removeClass('strips__strip--expanded');
					tileText.css('transition',
							'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
					stripClose.removeClass('strip__close--show');
					stripClose.css('transition',
							'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
					expanded = false;
				}
			};
			var bindActions = function() {
				tileLink.on('click', open);
				stripClose.on('click', close);
			};
			var init = function() {
				bindActions();
			};
			return {
				init : init
			};
		}();
		Expand.init();
	</script>
</body>
</html>

